<template>
	<view class="wrap">
		<view class="item">
			<view class="title">转出金额(元)</view>
			<view class="flex">
				<view style="margin-right: 12rpx;">¥</view>
				<input type="digit" style="font-size: 64rpx;height: 64rpx;" placeholder="请输入提现金额" placeholder-style="color: #A4A4A4;font-size: 32rpx;" v-model="balance" @input="changeBalance" />
				<view class="blue" @click="allBalance">全部提现</view>
			</view>
		</view>
		<view class="item">
			<view class="title">转出银行</view>
			<view class="flex" style="justify-content: space-between;" @click="selectCard">
				<view class="desc">{{cardText}}</view>
				<image src="@/static/icon_enter.png" mode=""></image>
			</view>
		</view>
		<view class="item" v-if="type == 2">
			<view class="title">提现验证码</view>
			<view class="flex">
				<input type="number" style="font-size: 32rpx;" placeholder="请输入验证码" maxlength="6" placeholder-style="color: #A4A4A4;" v-model="otpValue" @input="oninput" />
				<view class="blue" @click="sendcode">{{countText}}</view>
			</view>
		</view>
		
		<view class="btn-wrap">
			<view class="btn" @click="onWithdraw">确认提现</view>
			<view class="flex desc">
				<image src="@/static/icon_withdraw_warn.png" mode=""></image>
				<view>每天转出金额不可超过5万元备份</view>
			</view>
		</view>
		
		
		<uni-popup ref="popup" type="bottom">
			<view class="popup-wrap">
				<view class="title">选择到账银行卡</view>
				<view class="card-wrap">
					<radio-group @change="radioChange">
						<label class="flex" v-for="(item, index) in cardInfoList" :key="index">
							<view class="radio-item">
								<image class="icon" :src="item.image" mode=""></image>
								<view class="info">
									<view class="text">
										<text class="name">{{item.bankName}}</text>
										<text class="type">储蓄卡</text>
									</view>
									<view class="desc" v-if="item.type == 2">可提现二类户余额</view>
									<view class="desc" v-if="item.type == 1">可提现电子钱包余额</view>
									<view class="number">**** **** **** {{formatBank(item.cardNo)}}</view>
								</view>
							</view>
							<radio :value="index" :checked="index === current" color="#3993FF"/>
						</label>
					</radio-group>
				</view>
				<view class="bottom" @click="goAddCard">
					<image src="@/static/icon_blue_add.png" mode=""></image>
					<text>添加银行卡</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCard: false,
				elhBalance: '',
				jzbBalance: '',
				balance: '',
				type: '',
				cardInfo: null,
				cardInfoList: [],
				cardText: '',
				current: 0,
				time: 60,
				countText: '发送验证码',
				otpValue: '',
				ipAddr: '',
				otpOrderNo: '',
				businessNo: '',
				payId: '',
			};
		},
		onLoad(options) {
			let query = JSON.parse(options.query)
			console.log(query)
			this.elhBalance = query.elhBalance
			this.jzbBalance = query.jzbBalance
			this.payId = query.payId
			this.type = query.type
			this.cardInfo = query.cardInfo[0]
			if(this.type == 2){
				this.balance = this.elhBalance
			}else{
				this.balance = this.jzbBalance
			}
			let cardCode = this.cardInfo.cardNo.slice(-4)
			this.cardText = `${this.cardInfo.bankName}(${cardCode})`
			
			this.wxRequest({
				// 获取ip
				url: `${this.API}/driverService/getIp`,
				success: (res) => {
					this.ipAddr = res.data.data.ip
				}
			});
		},
		methods: {
			radioChange(e) {
				let index = Number(e.detail.value)
				console.log(index)
				this.cardInfo = this.cardInfoList[index]
				let cardCode = this.cardInfo.cardNo.slice(-4)
				this.cardText = `${this.cardInfo.bankName}(${cardCode})`
				this.type = this.cardInfo.type
				this.type == 1 ? this.balance = this.jzbBalance : this.balance = this.elhBalance
			},
			goAddCard() {
				this.$refs.popup.close()
				uni.navigateTo({
					url: './addCard'
				})
			},
			onWithdraw() {
				if(this.type == 1){
					this.jzbCashOut()
				}else{
					if(!this.otpValue){
						uni.showToast({
							title: '请先获取验证码并输入',
							icon: 'none'
						});
					}else{
						this.elhCashOut()
					}
				}
			},
			sendcode() {
				if (this.time == 60) {
					this.timer = setInterval(() => {
						this.countText = `${this.time}s后重新获取验证码`;
						this.time--;
						if (this.time < 0) {
							this.time = 60;
							this.countText = '重新获取验证码';
							clearInterval(this.timer);
						}
					}, 1000);
					//二类户
					this.wxRequest({
						url: `${this.API}/mini/erLeiHu/getIdCodeByCash`,
						method: 'POST',
						data: {
							payId: this.payId,
							amount: this.balance
						},
						title: '验证码发送中...',
						success: res => {
							this.otpOrderNo = res.data.data.otpOrderNo;
							this.businessNo = res.data.data.businessNo;
						}
					});
				}
			},
			elhCashOut() {
				if(this.balance > this.elhBalance){
					uni.showToast({
						title: `提现金额不能超过${this.elhBalance}元`,
						icon: 'none'
					});
					return
				}
				this.wxRequest({
					url: `${this.API}/mini/erLeiHu/cashOut`,
					method: 'POST',
					data: {
						payId: this.payId,
						bussinessNo: this.businessNo,
						amount: this.balance,
						ipAddr: this.ipAddr,
						otpOrderNo: this.otpOrderNo,
						otpValue: this.otpValue
					},
					title: '提现中...',
					success: res => {
						let accountNo = res.data.data.accountNo;
						uni.redirectTo({
							url: '../personal/withdrawsuccessfully?category=true' + '&bussinessNo=' + this.businessNo + '&accountNo=' + accountNo
						});
					},
					complete: res => {
						this.otpValue = ''
					}
				});
			},
			jzbCashOut() {
				if(this.balance > this.jzbBalance){
					uni.showToast({
						title: `提现金额不能超过${this.jzbBalance}元`,
						icon: 'none'
					});
					return
				}
				this.wxRequest({
					url: `${this.API}/mini/jzb/cashOut`,
					method: 'POST',
					data: {
						bankName: this.cardInfo.bankName,
						bankNo: this.cardInfo.cardNo,
						cashAmount: this.balance
					},
					title: '提现中...',
					success: res => {
						let accountNo = res.data.data.billNo;
						uni.redirectTo({
							url: '../personal/withdrawsuccessfully?category=false'  + '&bankNo=' + this.cardInfo.cardNo + '&accountNo=' + accountNo + '&amount=' + this.balance
						});
					}
				});
			},
			changeBalance(e){
				this.$nextTick(() => {
					let val = e.target.value.toString();
					val = val.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
					val = val.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
					val = val.replace(/^0+\./g, '0.');
					val = val.match(/^0+[1-9]+/) ? (val = val.replace(/^0+/g, '')) : val;
					val = val.match(/^\d*(\.?\d{0,2})/g)[0] || '';
					console.log(val)
					console.log(this.balance)
					if(this.type == 1){
						if(val > this.jzbBalance){
							uni.showToast({
								title: `提现金额不能超过${this.jzbBalance}元`,
								icon: 'none'
							});
							this.balance = ''
							return
						}
					}else{
						if(val > this.elhBalance){
							uni.showToast({
								title: `提现金额不能超过${this.elhBalance}元`,
								icon: 'none'
							});
							this.balance = ''
							return
						}
					}
					this.balance = val;
				});
			},
			allBalance() {
				this.type == 2 ? this.balance = this.elhBalance : this.balance = this.jzbBalance
			},
			formatBank(bank) {
				// return bank.replace(/[\s]/g, 'string').replace(/(\d{4})(?=\d)/g, "$1 ")
				return bank.slice(-4)
			},
			selectCard() {
				this.wxRequest({
					url: `${this.API}/myWallet/queryDriverJzbCardNo`,
					method: 'POST',
					success: res => {
						this.cardInfoList = res.data.data
						console.log(this.cardInfoList)
						console.log(this.cardInfo)
						this.current = this.cardInfoList.indexOf(this.cardInfoList.filter(item => {
							return item.cardNo == this.cardInfo.cardNo && item.type == this.cardInfo.type
						})[0])
						this.$refs.popup.open()
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.popup-wrap{
		background: #fff;
		padding: 0 24rpx 24rpx;
		.title{
			font-size: 32rpx;
			font-weight: 500;
			color: #333330;
			text-align: center;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #F9F9F9;
		}
		.flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.card-wrap{
			max-height: 50vh;
			overflow: auto;
		}
		.bottom{
			background: #fff;
			padding: 24rpx 0;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #000000;
			border-radius: 12rpx;
			image{
				width: 76rpx;
				height: 76rpx;
				margin-right: 24rpx;
			}
		}
		.radio-item{
			flex: 1;
			padding: 24rpx 24rpx 24rpx 100rpx;
			background: #fff;
			border-radius: 12rpx;
			margin-bottom: 16rpx;
			overflow: hidden;
			position: relative;
			.info{
				margin-top: 12rpx;
				.number{
					font-size: 40rpx;
					font-weight: 500;
					color: #333333;
					padding: 24rpx 0 12rpx;
				}
				.text{
					display: flex;
					align-items: center;
					color: #333333;
					.name{
						font-size: 34rpx;
						font-weight: 500;
						margin-right: 24rpx;
					}
					.type{
						font-size: 24rpx;
						font-weight: 500;
					}
				}
				.desc{
					font-size: 24rpx;
					font-weight: 400;
					color: #9E9E9E;
				}
			}
			.icon{
				position: absolute;
				top: 32rpx;
				left: 24rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	.wrap{
		padding: 0 32rpx;
		.item{
			margin-top: 24rpx;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #F9F9F9;
			image{
				width: 28rpx;
				height: 28rpx;
			}
			.title{
				font-size: 34rpx;
				font-weight: 500;
				color: #333330;
				margin-bottom: 24rpx;
			}
			.desc{
				font-size: 30rpx;
				font-weight: 400;
				color: #A4A4A4;
			}
			.blue{
				font-size: 28rpx;
				font-weight: 500;
				color: #177CF1;
			}
		}
	}
	.flex{
		display: flex;
		align-items: center;
		input{
			flex: 1;
		}
	}
	.btn-wrap{
		margin-top: 68rpx;
		padding: 0 16rpx;
		.btn{
			box-sizing: border-box;
			width: 100%;
			padding: 24rpx 0;
			text-align: center;
			background-image: linear-gradient(to right, #3993FF, #036EE8);
			color: #fff;
			font-size: 30rpx;
			font-weight: 500;
		}
		.desc{
			font-size: 24rpx;
			color: #9E9E9E;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 12rpx;
		}
		image{
			width: 28rpx;
			height: 28rpx;
		}
	}
</style>